<template>
  <view class="repair">
    <view class="repair-header">
      <view class="my-title">
        <view class="my-title-img">
          <image :src="yonghuwx.avatarUrl" mode=""></image>
          <!-- <web-view src="https://www.baidu.com/"></web-view> -->
        </view>
        <view class="my-title-button"
          ><text>{{ name }}</text></view
        >
      </view>
    </view>
    <view class="repair-content">
      <view class="content-section">
        <view class="section-start">
          <view class="box">
            <view class="box-up">
              <view class="box-left-icon">
                <text class="iconfont icon-baoxiu"></text>
              </view>
            </view>
            <view class="box-down">
              <view class="box-down-button" @click="startRepair">
                <button plain="true">立即报修</button>
              </view>
            </view>
          </view>
        </view>
        <view class="section-list">
          <view class="box">
            <view class="box-up">
              <view class="box-left-icon">
                <text class="iconfont icon-jilu"></text>
              </view>
            </view>
            <view class="box-down">
              <view class="box-down-button" @click="myRepair">
                <button plain="true">我的报修</button>
              </view>
            </view>
          </view>

          <!-- <button plain="true" @click="myRepair">我的报修</button> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPeopleInfo } from "@/util/getPeopleInfo";
export default {
  data() {
    return {
      show: true,
      yonghuwx: {},
      name: "赵杰",
      openid: "",
    };
  },
  onShow() {
    getPeopleInfo(this);
  },
  methods: {
    startRepair() {
      // uni.navigateTo({ url:"/pages/home/service/ReportRepair/StartRepair"});

      uni.navigateTo({ url: "/pages/home/service/ReportRepair/StartRepair" });
    },
    myRepair() {
      uni.navigateTo({ url: "/pages/home/service/ReportRepair/ListMyRepair" });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.repair {
  height: 100vh;
  background-color: $uni-color-indexBg;
}
.repair-header {
  width: 100%;
  height: 250rpx;
  background-color: #3d86cb;
  .my-title {
    width: 100%;
    height: 220rpx;
    // background-color: #56d998;
    display: flex;
    padding: 0 40rpx;
    box-sizing: border-box;
    .my-title-img {
      @include center;
      image {
        @include center;
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        background-color: #ffffff;
      }
    }
    .my-title-button {
      @include center;
      padding: 0 15rpx;

      text {
        padding: 0 20rpx;
        color: #ffffff;
      }
    }
  }
}
.repair-content {
  .content-section {
    .section-start {
      width: 80%;
      height: 250rpx;
      background-color: #fff;
      border-radius: 10px;
      margin: 0 auto;
      padding: 20rpx 0;
      margin-top: 40rpx;
    }
    .section-list {
      width: 80%;
      height: 250rpx;
      background-color: #fff;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: 50rpx;
      padding: 20rpx 0;
    }
    .box {
      // padding: 0 40rpx 0 10rpx;
      height: 100%;
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // @include center;
      .box-up {
        display: flex;
        @include center;
        .box-left-icon {
          // @include center;
          // display: flex;
          // justify-self: start;
          .icon-jilu {
            font-size: 100rpx;
            color: #15bc84;
            // #15bc84
          }
          .icon-baoxiu {
            font-size: 100rpx;
            color: #f5906c;
          }
        }
        .box-left-text {
          // font-weight: 600;
          .left-text-up {
            @include center;
            color: $uni-text-color-placeholder;
          }
          .left-text-down {
            @include center;
            color: $uni-text-color-placeholder;
          }
        }
      }
      .box-down {
        .box-down-button {
          padding-top: 55rpx;
          button {
            color: #fff;
            background-color: $uni-color-primary;
            width: 80%;
            border: none;
            font-size: 30rpx;
          }
        }
      }
    }
  }
}
</style>
